<template>
  <s-layout class="chat-wrap" title="会员中心" backgroundColor="#212124" navbar="inner" :is_main-body="true"
            color="#FFEBA3" :is_back="true"
            :customBody="customBody()">
    <image :src="`${nc_image_path}/nc_vip_backgorund.png`" :style="[setImageStyle(750,445)]"></image>
    <s-block :styles="blockStyles(60)"></s-block>
    <view class="inputField">
      <uni-search-bar
        class="input-search"
        v-model="state.cardNumber"
        placeholder="请输入卡号"
        cancelButton="none"
        clearButton="none"
        :bgColor="data.bgColor"
        :textColor="data.textColor"
        :style="data.inputStyle"
      >
        <template #searchIcon></template>
      </uni-search-bar>
    </view>
    <s-block :styles="blockStyles(30)"></s-block>
    <view class="inputField">
      <uni-search-bar
        class="input-search"
        v-model="state.kamil"
        placeholder="请输入卡密"
        cancelButton="none"
        clearButton="none"
        :bgColor="data.bgColor"
        :textColor="data.textColor"
        :style="data.inputStyle"
      >
        <template #searchIcon></template>
      </uni-search-bar>
    </view>
    <s-block :styles="blockStyles(120)"></s-block>
    <view class="confirmActivation flex flex-row align-center justify-center" @tap="exchange">
      确认激活
    </view>
    <s-block :styles="blockStyles(47)"></s-block>
    <view class="memberBenefits" @tap="sheep.$router.go('/pages/public/richtext',{
      id:4,
      title:'会员权益',
    })">查看会员权益</view>
  </s-layout>
</template>

<script setup>
  import { computed, reactive } from 'vue';
  import sheep from '@/sheep';
  import SBlock from '@/sheep/components/s-block/s-block.vue';
  import SLayout from '@/sheep/components/s-layout/s-layout.vue';

  const customBody = () => {
    return {
      'display': 'flex',
      'flex-direction': 'column',
      'align-items': 'center',
    };
  };
  const setImageStyle = (width, height) => {
    return {
      'width': `${width}rpx`,
      'height': `${height}rpx`,
    };
  };
  const blockStyles = (height = 10) => {
    return {
      height,
      type: 'color',
      background: {
        bgColor: 'transparent',
      },
    };
  };

  const state = reactive({
    cardNumber: '',
    kamil: '',
  });

  const data = reactive({
    bgColor: 'transparent',
    textColor: '#FFFFFF',
    inputStyle: {},
  });
  const nc_image_path = computed(() => sheep.$store('AI').nc_image_path);

  async function exchange() {
    if (state.cardNumber == '') {
      uni.showToast({
        icon: 'none',
        title: '请输入卡号',
      });
      return;
    }
    if (state.kamil == '') {
      uni.showToast({
        icon: 'none',
        title: '请输入卡密',
      });
      return;
    }
    const { code } = await sheep.$api.user.exchangeCard({
      cart: state.cardNumber,
      password: state.kamil,
    });
    if (code == 1) {
      uni.showToast({
        icon: 'none',
        title: '兑换成功',
      });
      sheep.$router.go('/pages/message/user')
    }
  }
</script>


<style lang="scss">
  .inputField {
    width: 659rpx;
    background: #292A2E;
    border-radius: 8rpx 8rpx 8rpx 8rpx;

    .input-search {
      ::v-deep .uni-searchbar {
        padding: 10rpx 0 10rpx 0 !important;
      }

      ::v-deep .uni-searchbar__box-icon-search {
        display: none !important;
      }

      ::v-deep .uni-searchbar__box-search-input {
        margin-left: 24rpx !important;
      }

      ::v-deep .uni-searchbar__text-placeholder {
        margin-left: 24rpx !important;
      }
    }
  }

  .confirmActivation {
    width: 563rpx;
    height: 80rpx;
    background: #292A2E;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 34rpx;
    color: #FFEBA3;
  }

  .memberBenefits {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 24rpx;
    color: #717171;
  }
</style>
